import React, { useCallback } from 'react'
import { Icon, NavBar } from 'antd-mobile'
import { useHistory, useLocation } from 'react-router-dom'

import { DetailWrap } from './StyledDetail'


const Detail = () => {
  let history = useHistory()
  let location = useLocation()
  
  
  let state = location.state

  const handleClickLeft = useCallback(
    () => {
      history.goBack()
    },
    [history],
  )

  return (
    <DetailWrap>
      <NavBar
        mode='dark'
        icon={<Icon type='left' />}
        onLeftClick={handleClickLeft}
        style={{ backgroundColor: '#ee742f' }}
      >
        {state && state.title}
      </NavBar>
      <div>
        <div>
          <img src="http://s1.cdn.jiaonizuocai.com/videoImg/201510/1313/561c9a314c8bb.jpg/OTAweDYwMA" alt="" />
        </div>
        <div className='details'>
          <h1>{state && state.title}</h1>
          <h3>111浏览 111收藏</h3>
          <button>收藏</button>
        </div>
      </div>
    </DetailWrap>
  )
}

export default Detail